<template>
    <div class="TagList">
        <el-card class="TagList-header">
            <div class="search-input">
                <p class="search-input-name">标签名: </p>
                <el-input class="search-input-tool" v-model="tagName" placeholder="请输入标签名称" />
            </div>
            <el-button 
                type="primary" 
                class="opera-search"
                :icon="Search"
                @click="SearchOpera" 
            >搜索</el-button>
            <el-button 
                class="opera-search"
                :icon="Refresh"
                @click="RefreshOpera" 
            >重置</el-button>
        </el-card>
        <el-card class="TagList-section">
            <el-button type="primary" @click="CreateTag" class="opera-createMenu">新建标签</el-button>
            <div class="TagList-content">
                <TableModules :data="tagData">
                    <template #tableContent>
                        <el-table-column prop="name"  align="center" label="标签名"/>
                        <el-table-column fixed="right" align="center" label="操 作">
                            <template #default="scope">
                                <el-button type="primary" @click="EditTag(scope.row)">修 改</el-button>
                                <el-button type="danger" @click="DeletTag(scope.row)">删 除</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </TableModules>
            </div>
            <div class="TagList-footer">
                <PaginationModules
                    :pageTotal="pageTotal"
                    @currentClick="CurrentClick" 
                ></PaginationModules>
            </div>
        </el-card>
        <el-dialog
            v-model="tagDialogVisible"
            :title="operaTypeName"
            width="400px"
            class="tagDialog"
            align-center
        >
            <div class="tagDialog-section">
                <div class="tagDialog-section-chunk">
                    <p class="chunk-input-name">标签名: </p>
                    <el-input v-model="dialogTagValue" class="chunk-input-value" placeholder="请输入菜单名" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="tagDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="TagDialogConfig">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
    
<script setup>
import { onMounted, ref } from 'vue';
import TableModules from '@/components/TableModules.vue';
import PaginationModules from '@/components/PaginationModules.vue';
import { GetTagList,CreateTagReq,DeletTagReq } from '../utils/api/index.js';
import { Search,Refresh } from '@element-plus/icons-vue';
const tagName = ref(undefined); // 标签名
const tagData = ref([]); // 标签数据
const tagDialogVisible = ref(false); // 标签弹框开关
const operaTypeName = ref(''); // 操作类型名
const isEdit = ref(false); // 是否编辑
const editRowVal = ref(''); // 编辑的行值
const dialogTagValue = ref(''); // 弹框标签值
const dialogConfigFlag = ref(false); // 弹框确定开关
const pageNum = ref(1);
const pageSize = ref(10);
const pageTotal = ref(0); // 总条数
const SearchOpera = () => {
    GetTagListData(tagName.value);
}
const RefreshOpera = () => {
    tagName.value = '';
    GetTagListData();
}
const GetTagListData = async (name = undefined) => {
    let tagRes = await GetTagList({
        name,
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    if(tagRes.code == 200) {
        tagData.value = tagRes.data.list;
        pageTotal.value = tagRes.data.total;
    }
};
onMounted(() => {
    GetTagListData()
})
// 创建标签
const CreateTag = () => {
    tagDialogVisible.value = true;
    dialogTagValue.value = '';
    isEdit.value = false;
    operaTypeName.value = '新建'
}
// 修改标签
const EditTag = (rowValue) => {
    tagDialogVisible.value = true;
    dialogTagValue.value = rowValue.name;
    isEdit.value = true;
    editRowVal.value = rowValue;
    operaTypeName.value = '修改'
}
// 确认标签弹框
const TagDialogConfig = () => {
    if(dialogConfigFlag.value) return;
    dialogConfigFlag.value = true;
    if(dialogTagValue.value == '') {
        // eslint-disable-next-line no-undef
        ElMessage({
            message: '标签名不能为空',
            type: 'warning',
        })
        return;
    }
    CreateTagReq({
        name: dialogTagValue.value,
        id: isEdit.value ? editRowVal.value.id : undefined
    }).then((res) => {
        if(res.code == 200) {
            dialogConfigFlag.value = false;
            tagDialogVisible.value = false;
            // eslint-disable-next-line no-undef
            ElMessage({
                showClose: true,
                message: isEdit.value ? '修改成功' : '新建成功',
                type: 'success',
            })
            GetTagListData();
        }
    });
}
// 删除标签
const DeletTag = (rowValue) => {
    // eslint-disable-next-line no-undef
    ElMessageBox.confirm(
        '确定要删除吗？',
        '删除标签',
        {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
        }
    )
    .then(() => {
        DeletTagReq({
            id: rowValue.id
        }).then((res) => {
            if(res.code == 200) {
                GetTagListData();
                // eslint-disable-next-line no-undef
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
            }
        })
    })
};
// 分页前进/后退
const CurrentClick = (pageVal) => {
    pageNum.value = pageVal;
    GetTagListData(tagName.value);
}
</script>
    
<style scoped lang="scss">
.TagList{
    width: 100%;
    height: 100%;
    &-header{
        height: 85px;
        :deep(.el-card__body){
            display: flex;
            align-items: center;
            .search-input, .search-select{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:nth-child(n + 2) {
                    margin: 0 0 0 20px;
                }
                &-tool{
                    width: 200px;
                    margin: 0 0 0 20px;
                }
            }
            .opera-search{
                margin: 0 0 0 20px;
            }
            .opera-createMenu{
                margin: 0 0 0 20px;
            }
        }
    }
    &-section{
        width: 100%;
        height: calc(100% - 85px - 10px) ;
        display: flex;
        flex-direction: column;
        margin: 10px 0 0;
        :deep(.el-card__body){
            height: 100%;
        }
        .TagList-content{
            height: calc(100% - 32px - 60px - 20px) ;
            display: flex;
            margin: 20px 0 0;
        }
        .TagList-footer{
            height: 60px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }
    }
    .tagDialog{
        &-section{
            display: flex;
            flex-direction: column;
            align-items: center;
            &-chunk{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:last-child{
                    margin: 20px 0 0;
                }
                .chunk-input-name{
                    width: 100px;
                    text-align: center;
                }
                .chunk-input-value{
                    width: 200px;
                    margin: 0 0 0 10px;
                }
            }
        }
    }
}
</style>